// 1. 单行注释，双斜杠注释，不编译
/* 多行注释，原css注释，被编译 */

// 2. 变量
// 单值变量
// $color: green;
// .box1{
//     background: $color;
// }
// .box2{
//     background: $color;
// }

// 多值变量
// $color: red green yellow;
// .box1{
//     background: nth($color, 1);
// }
// .box2{
//     background: nth($color, 3);
// }
// .box3{
//     background: nth($color, 2);
// }

// 复杂变量：类似数组和对象
// $arr:(1 100px)(2 110px)(3 120px)(4 130px);
// @each $a,$b in $arr {
//     h#{$a}{
//         width: $b;
//     }
// }

// $obj:(h1:10px,h2:20px,h3:30px);
// @each $key,$val in $obj{
//     #{$key}{
//         font-size: $val;
//     }
// }

// 2. 嵌套
// 选择器嵌套
// ul.list
//     li
//     li
//     li.last
// .list{
//     li{
//         border: solid 1px black;
//         &:hover{
//             background: red
//         }
//     }
//     .last{
//         border: none
//     }
// }


// 属性嵌套：只有复合属性才能嵌套
// .box{
//     border: {
//         left: {
//             style: solid;
//             width: 10px;
//             color: red;
//         }
//         right: {
//             style: double;
//             width: 20px;
//             color: yellow;
//         }
//     }
// }


// 3. 混合，mixin，代码块，没有返回值
// @mixin abc($q){
//     -webkit-transform: $q;
//     -moz-transform: $q;
//     -ms-transform: $q;
//     -o-transform: $q;
//     transform: $q;
// }
// .box1{
//     @include abc(rotate(90deg));
// }
// .box2{
//     @include abc(translate(100px));
// }

// 4. 计算
// 如：rem的计算，相对于html的font-size
// html{
//     font-size: 16px;
// }
// .box{
//     width: 100px / 16px * 1rem;
//     height: 100px / 16px * 1em;
//     height: 100px / 16px * 100%;
// }

// 5. 函数，可以有返回值
// $fs:30px;
// html{
//     font-size: $fs;
// }
// @function pxTrem($px){
//     @return $px / $fs * 1rem;
// }
// .box{
//     width: pxTrem(100px);
//     height: pxTrem(200px);
// }

// 6. 继承
// .box1{
//     width: 100px;
//     height: 100px;
//     background: red;
// }
// .box2{
//     @extend .box1;
//     background: yellow;
// }

// 7. 导入并合并
// @import "./style.scss";


